<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Real Estate Builders Free Responsive Website Templates - icon">
    <meta name="author" content="">
    <title>FOREST公司官方</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="webjars/sweetalert2/10.10.0/dist/sweetalert2.min.css">
    <script src="webjars/sweetalert2/10.10.0/dist/sweetalert2.min.js"></script>

    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
    <script src="js/username.js"></script>
</head>

<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!-- Button for smallest screens -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            <a class="navbar-brand" href="web-index.html">
                <img src="assets/images/logo.png" alt="Techro HTML5 template"></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav pull-right mainNav">
                <li><a href="web-login.html">首页</a></li>
                <li><a href="web-projects.html">展示风采</a></li>
                <li class="active"><a href="web-price.html">费用信息</a></li>
                <li><a href="web-contact.html">维修管理</a></li>
                <li><a href="web-about.html">投诉管理</a></li>
                <li><a href="web-customer.html">客服管理</a></li>
                <li><a href="/forest/TuiChu">注销</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>
<!-- /.navbar -->

<header id="head" class="secondary">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <h1>Our Price</h1>
            </div>
        </div>
    </div>
</header>

<!-- container -->
<div class="container">
    <div class="row">
        <!-- Article content -->
        <section class="col-sm-12 maincontent">
            <h3>Cost</h3>
            <p>
                小区物业管理来说，其工作流程的繁杂性、多样化、管理复杂、收缴费用与设备维护繁琐。计算机已完全能够胜任物业管理工作，而且更加准确、方便、快捷、高效、清晰、透明，它完全可以克服以上所述的不足之处。这将给项目查询和管理带来很大的方便，从而给物业管理工作带来更高的效率，这也是物业管理正规化、现代化的重要标志。
            </p>
            <p>
                因此，开发一套高效率、无差错的小区物业管理系统软件十分必要。本系统的主要目的是告别帐本，安全、快捷的保存数据信息。由于小区物业管理涉及到费用问题，为了增强系统的保密性，使业主利益不受损害，使业主能够对自家的物业费用和投诉等情况提供透明化、直观的了解。
            </p>

        </section>
    </div>
</div>
<!-- /container -->

<section class="container">
    <div class="heading">
        <!-- Heading -->
        <h3>费用信息</h3>
        <p></p>
        <br/>
    </div>
    <div class="row flat">
        <div class="col-lg-3 col-md-3 col-xs-6">
            <ul class="plan plan1">
                <li class="plan-name">水费
                </li>
                <li class="plan-price">
                    <strong>$0.5</strong> 单价
                </li>
                <li>
                    <strong id="usercostName"></strong> 度数
                </li>
                <li>
                    <strong>12</strong> 物业费
                </li>
                <li>
                    <strong id="sum"></strong> 总价
                </li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-6">
            <ul class="plan plan2 featured">
                <li class="plan-name">电费
                </li>
                <li class="plan-price">
                    <strong>$0.6</strong> 单价
                </li>
                <li>
                    <strong id="usercostName1"></strong> 度数
                </li>
                <li>
                    <strong>12</strong> 物业费
                </li>
                <li>
                    <strong id="sum1"></strong> 总价
                </li>
            </ul>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-6">
            <ul class="plan plan3">
                <li class="plan-name">服务费
                </li>
                <li class="plan-price">
                    <strong>$1.2</strong> 单价
                </li>
                <li>
                    <strong id="usercostName2"></strong> 度数
                </li>
                <li>
                    <strong>12</strong> 物业费
                </li>
                <li>
                    <strong id="sum2"></strong> 总价
                </li>
            </ul>
        </div>


        <div class="col-lg-3 col-md-3 col-xs-6">
            <ul class="plan plan4">
                <li class="plan-name">各项费用
                </li>
                <li>
                    <strong>36</strong> 物业费
                </li>
                <li class="plan-price">
                    <strong id="sumNum"></strong> 总价
                </li>
                <li class="plan-action">
                    <a class="btn" id="demoBtn1">Signup</a>
                </li>
            </ul>
        </div>
    </div>
</section>

<footer id="footer">
    <div class="footer2">
        <div class="container">
            <div class="row">
                <div class="col-md-6 panel">
                    <div class="panel-body">
                        <p class="simplenav">
                            <a href="web-login.html">首页</a> |
                            <a href="web-projects.html">展示风采</a> |
                            <a href="web-price.html">费用信息</a> |
                            <a href="web-contact.html">维修管理</a> |
                            <a href="web-about.html">投诉管理</a> |
                            <a href="web-customer.html">客服管理</a>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 panel">

                </div>
                <input type="hidden" id="yeZhuID"/>
                <input type="hidden" id="id"/>
            </div>
            <!-- /row of panels -->
        </div>
    </div>
</footer>


<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>


<script type="text/javascript">
    //加载信息
    function loadstu() {
        var data = {
            "num": 0
        };
        $.ajax({
            url: "userCostIndex",
            type: "POST",
            dataType: "json",
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify(data),
            success: function (data) {
                if (data.code == 500) {
                    window.location.href = userUrl + "/web-login.html";
                } else {
                    $("#usercostName").text(data.user[0]);
                    $("#usercostName1").html(data.user[1]);
                    $("#usercostName2").html(data.user[2]);
                    $("#sum").html(data.sum[0]);
                    $("#sum1").html(data.sum[1]);
                    $("#sum2").html(data.sum[2]);
                    $("#sumNum").html(data.sumNum);
                    $("#yeZhuID").val(data.yeZhuID);
                    swal.fire("提示", "各项费用总和:" + data.sumNum, "success")
                }
            }
        });
    }

    $("#demoBtn1").click(function () {
        var data = {
            "pay_type": 43,  //支付宝
            "money": 0.01, //传输金额
            "ids": $("#yeZhuID").val(),
            "sum": $("#sumNum").html()
        };

        swal.fire({
            type: 'warning', // 弹框类型
            title: '提示', //标题
            text: "请确认是否缴费", //显示内容
            confirmButtonColor: '#3085d6',// 确定按钮的 颜色
            confirmButtonText: '确定',// 确定按钮的 文字
            showCancelButton: true, // 是否显示取消按钮
            cancelButtonColor: '#d33', // 取消按钮的 颜色
            cancelButtonText: "取消", // 取消按钮的 文字
            focusCancel: true, // 是否聚焦 取消按钮
            reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
        }).then(function (isConfirm) {
            if (isConfirm.value) {
                $.ajax({
                    url: "payType",
                    type: "POST",
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify(data),
                    success: function (data) {
                        if (data.code == 200) {
                            window.location.href = userUrl + "/zhifu.html";
                        } else {
                            swal.fire("提示", "费用已交过", "question");
                        }
                    }
                });
            } else {
                Swal.fire("取消", "取消登记", "error");
            }
        });
    });
    $(function () {
        //调用加载数据函数
        loadstu();
    });


</script>
</html>